/*这个ac-game-settings类用于设置游戏设置界面的样式*/
.ac-game-settings {
    /* 设置元素的宽度为父元素的100% */
    width: 100%;

    /* 设置元素的高度为父元素的100% */
    height: 100%;

    /* 设置背景图像，图像的路径是相对于CSS文件位置的 "/static/image/menu/background.gif" */
    background-image: url("/static/image/menu/background.gif");

    /* 设置背景图像的尺寸，使其完全覆盖元素区域 */
    /* 注意：在某些老旧的浏览器中，可能需要使用-webkit-background-size和-moz-background-size等前缀 */
    background-size: 100% 100%;

    /* 禁止用户选择文本（防止复制等操作） */
    /* 这通常用于提高用户体验，避免在游戏界面中出现不必要的文本选择行为 */
    user-select: none;
}

/* 登录框的样式 */
.ac-game-settings-login {
    height: 41vh;
    /* 设置高度为视口高度的41% */
    width: 20vw;
    /* 设置宽度为视口宽度的20% */
    position: relative;
    /* 定位方式为相对定位 */
    top: 50%;
    /* 相对于其正常位置向上移动50% */
    left: 50%;
    /* 相对于其正常位置向左移动50% */
    transform: translate(-50%, -50%);
    /* 通过平移自身的宽高的一半，实现居中效果 */
    background-color: rgba(0, 0, 0, 0.7);
    /* 背景颜色为黑色，透明度为70% */
    border-radius: 5px;
    /* 边框圆角为5像素 */
}

/* 设置标题的样式 */
.ac-game-settings-title {
    color: white;
    /* 文本颜色为白色 */
    font-size: 3vh;
    /* 字体大小为视口高度的3% */
    text-align: center;
    /* 文本居中对齐 */
    padding-top: 2vh;
    /* 上方内边距为视口高度的2% */
    margin-bottom: 2vh;
    /* 下方外边距为视口高度的2% */
}

/* 设置用户名输入框的外部容器样式，高度固定 */
.ac-game-settings-username {
    display: block;
    /* 设置为块级元素 */
    height: 7vh;
    /* 高度为视口高度的7% */
}

/* 设置密码输入框的外部容器样式，高度固定 */
.ac-game-settings-password {
    display: block;
    /* 设置为块级元素 */
    height: 7vh;
    /* 高度为视口高度的7% */
}

/* 设置提交按钮的外部容器样式，高度固定 */
.ac-game-settings-submit {
    display: block;
    /* 设置为块级元素 */
    height: 7vh;
    /* 高度为视口高度的7% */
}

/* 设置AcWing相关元素（可能是图标或链接）的外部容器样式，高度固定 */
.ac-game-settings-acwing {
    display: block;
    /* 设置为块级元素 */
    height: 7vh;
    /* 高度为视口高度的7% */
}

/* 设置每个设置项（如输入框、按钮等）的样式 */
.ac-game-settings-item {
    width: 100%;
    /* 宽度为父容器的100% */
    height: 100%;
    /* 高度为父容器的100% */
}

/* 设置输入框的样式 */
.ac-game-settings-item>input {
    width: 90%;
    /* 宽度为父容器的90% */
    line-height: 3vh;
    /* 行高为视口高度的3% */
    position: relative;
    /* 定位方式为相对定位 */
    top: 50%;
    /* 相对于其正常位置向上移动50% */
    left: 50%;
    /* 相对于其正常位置向左移动50% */
    transform: translate(-50%, -50%);
    /* 通过平移自身的宽高的一半，实现居中效果 */
}

/* 设置按钮的样式 */
.ac-game-settings-item>button {
    color: white;
    /* 文本颜色为白色 */
    width: 90%;
    /* 宽度为父容器的90% */
    line-height: 3vh;
    /* 行高为视口高度的3% */
    position: relative;
    /* 定位方式为相对定位 */
    top: 50%;
    /* 相对于其正常位置向上移动50% */
    left: 50%;
    /* 相对于其正常位置向左移动50% */
    transform: translate(-50%, -50%);
    /* 通过平移自身的宽高的一半，实现居中效果 */
    background-color: #4CAF50;
    /* 背景颜色为绿色 */
    border-radius: 5px;
    /* 边框圆角为5像素 */
}

/* 设置错误消息的样式 */
.ac-game-settings-error-message {
    color: red;
    /* 文本颜色为红色 */
    font-size: 0.8vh;
    /* 字体大小为视口高度的0.8% */
    display: inline;
    /* 设置为内联元素 */
    float: left;
    /* 向左浮动 */
    padding-left: 1vw;
    /* 左方内边距为视口宽度的1% */
}

/* 设置选项（可能是用于切换或配置的链接或按钮）的样式 */
.ac-game-settings-option {
    color: white;
    /* 文本颜色为白色 */
    font-size: 2vh;
    /* 字体大小为视口高度的2% */
    display: inline;
    /* 设置为内联元素 */
    float: right;
    /* 向右浮动 */
    padding-right: 1vw;
    /* 右方内边距为视口宽度的1% */
    cursor: pointer;
    /* 鼠标悬停时显示为手形，表示可点击 */
}

/* 设置AcWing相关元素内图片的样式 */
.ac-game-settings-acwing>img {
    position: relative;
    /* 定位方式为相对定位 */
    top: 50%;
    /* 相对于其正常位置向上移动50% */
    left: 50%;
    /* 相对于其正常位置向左移动50% */
    transform: translate(-50%, -50%);
    /* 通过平移自身的宽高的一半，实现居中效果 */
    cursor: pointer;
    /* 鼠标悬停时显示为手形，表示可点击 */
    display: block;
    /* 设置为块级元素 */
}

/* 设置AcWing相关元素内文本的样式 */
.ac-game-settings-acwing>div {
    color: white;
    /* 文本颜色为白色 */
    font-size: 1.5vh;
    /* 字体大小为视口高度的1.5% */
    text-align: center;
    /* 文本居中对齐 */
    display: block;
    /* 设置为块级元素 */
}

/* 注册框的样式 */
.ac-game-settings-register {
    height: 49vh;
    /* 设置高度为视口高度的49% */
    width: 20vw;
    /* 设置宽度为视口宽度的20% */
    position: relative;
    /* 定位方式为相对定位 */
    top: 50%;
    /* 相对于其正常位置向上移动50% */
    left: 50%;
    /* 相对于其正常位置向左移动50% */
    transform: translate(-50%, -50%);
    /* 通过平移自身的宽高的一半，实现居中效果 */
    background-color: rgba(0, 0, 0, 0.7);
    /* 背景颜色为黑色，透明度为70% */
    border-radius: 5px;
    /* 边框圆角为5像素 */
}

/* 定义游戏菜单的整体样式 */
.ac-game-menu {
    width: 100%;
    /* 宽度占满父容器 */
    height: 100%;
    /* 高度占满父容器 */
    background-image: url("/static/image/menu/background.gif");
    /* 背景图片 */
    background-size: 100% 100%;
    /* 背景图片按容器比例缩放 */
    user-select: none;
    /* 禁止用户选择文本 */
}

/* 定义游戏菜单字段的样式，即菜单项放置的区域 */
.ac-game-menu-field {
    width: 20vw;
    /* 宽度为视口宽度的20% */
    position: relative;
    /* 定位方式为相对定位 */
    top: 40%;
    /* 距离父容器顶部40% */
    left: 20%;
    /* 距离父容器左侧20% */
}

/* 定义游戏菜单字段项的样式，即具体的菜单项 */
.ac-game-menu-field-item {
    color: white;
    /* 文字颜色为白色 */
    height: 6vh;
    /* 高度为视口高度的6% */
    width: 18vw;
    /* 宽度为视口宽度的18% */
    font-size: 4vh;
    /* 字体大小为视口高度的4% */
    font-style: italic;
    /* 字体样式为斜体 */
    text-align: center;
    /* 文字居中 */
    background-color: rgba(39, 21, 28, 0.6);
    /* 背景颜色为半透明的暗红色 */
    border-radius: 10px;
    /* 边框圆角为10像素 */
    letter-spacing: 0.5vw;
    /* 字符间距为视口宽度的0.5% */
    cursor: pointer;
    /* 鼠标悬停时显示为手型，表示可点击 */
    margin-bottom: 2vh;
    /* 在每个菜单项下方增加2vh的间距 */
}

/* 定义菜单项悬停时的样式 */
.ac-game-menu-field-item:hover {
    transform: scale(1.2);
    /* 元素放大到原来的1.2倍 */
    transition: 100ms;
    /* 动画过渡时间为100毫秒 */
}

.ac-game-playground {
    width: 100%;
    /* 设置元素的宽度为其父元素宽度的100% */
    height: 100%;
    /* 设置元素的高度为其父元素高度的100% */
    user-select: none;
    /* 禁止用户选择该元素内的文本或内容，通常用于防止文本被复制或元素被拖动 */
    background-color: grey;
    /* 设置元素的背景颜色为灰色 */
}

/* 将.ac-game-playground下的<canvas>元素居中 */
.ac-game-playground>canvas {
    position: relative;
    /* 设置相对定位以配合transform */
    top: 50%;
    /* 上移父元素高度的50% */
    left: 50%;
    /* 右移父元素宽度的50% */
    transform: translate(-50%, -50%);
    /* 通过移动自身宽高的一半来居中 */
}

/* 聊天历史记录框的样式设置 */
.ac-game-chat-field-history {
    position: absolute;
    /* 绝对定位 */
    top: 66%;
    /* 距离顶部66% */
    left: 20%;
    /* 距离左侧20% */
    transform: translate(-50%, -50%);
    /* 移动元素自身宽高的-50%，用于居中 */
    width: 20%;
    /* 宽度为父元素的20% */
    height: 32%;
    /* 高度为父元素的32% */
    color: white;
    /* 文字颜色为白色 */
    font-size: 2vh;
    /* 字体大小为视口高度的2% */
    padding: 5px;
    /* 内边距为5px */
    overflow: auto;
    /* 内容溢出时显示滚动条 */
}

/* 隐藏webkit内核浏览器的滚动条 */
.ac-game-chat-field-history::-webkit-scrollbar {
    width: 0;
    /* 滚动条宽度为0，即隐藏 */
}

/* 聊天输入框的样式设置 */
.ac-game-chat-field-input {
    position: absolute;
    /* 绝对定位 */
    top: 86%;
    /* 距离顶部86% */
    left: 20%;
    /* 距离左侧20% */
    transform: translate(-50%, -50%);
    /* 移动元素自身宽高的-50%，用于居中 */
    width: 20%;
    /* 宽度为父元素的20% */
    height: 3vh;
    /* 高度为视口高度的3% */
    color: white;
    /* 文字颜色为白色 */
    font-size: 2vh;
    /* 字体大小为视口高度的2% */
    background-color: rgba(222, 225, 230, 0.2);
    /* 背景颜色为半透明的浅灰色 */
}